<template>
  <!-- <el-space direction="vertical"> -->
  <el-row :gutter="4" justify="start" style="min-width: 1366px; overflow: auto">
    <el-col :span="4"
      ><el-input v-model="searchText" size="default" placeholder="菜品名称"
    /></el-col>
    <el-col :span="2"
      ><el-button type="primary" @click="methods.requestData"
        >查找菜品</el-button
      ></el-col
    >
    <el-col :offset="0" :span="2"
      ><el-button type="primary" @click="methods.handleAddDish"
        >添加菜品</el-button
      ></el-col
    >
  </el-row>
  <el-table :data="pageData.res.records" style="width: 100%">
    <el-table-column label="菜品名称" prop="name" />
    <el-table-column label="图片" prop="image">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="methods.getImageUrl(scope.row.image)"
          fit="fill"
        />
      </template>
    </el-table-column>

    <el-table-column align="left" label="菜品分类" prop="categoryName">
      <template #default="scope">
        <el-tag v-if="scope.row.type === 1">菜品</el-tag>
        <el-tag v-if="scope.row.type === 2" type="success">套餐</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="售价" prop="price" />
    
    <el-table-column label="售卖状态" prop="status" >
      <template #default="scope">
        <el-tag v-if="scope.row.status === 1" type="success">在售</el-tag>
        <el-tag v-if="scope.row.status === 0" type="warning">停售</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="最后操作时间" prop="updateTime">
      <template #default="scope">
        {{ methods.convertDate(scope.row.updateTime) }}
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作">
      <template #default="scope">

        <el-button
          size="small"
          type="primary"
          @click="methods.handleEdit(scope.$index, scope.row.id)"
          >编辑</el-button
        >
        
        <el-button
          v-if="scope.row.status === 1"
          size="small"
          type="warning"
          @click="methods.handleUpdateState(scope.row.id, 0)"
          >禁用</el-button
        >
        <el-button
          v-if="scope.row.status === 0"
          size="small"
          type="success"
          @click="methods.handleUpdateState(scope.row.id, 1)"
          >启用</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="methods.handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >

      </template>
    </el-table-column>
  </el-table>

  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <div class="pagination-block">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :page-size="10"
          :total="totalCount"
          :current-page="currentPage"
          @current-change="methods.handlePageIndexChange"
        />
      </div>
    </el-col>
  </el-row>

  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" style="width: 800px">
    <dish-edit @fatherFun="methods.getChildData" :dishId="editDishId" :editMode="isEditMode" ref="dishEdit"/>
    <template #footer> </template>
  </el-dialog>

</template>

<script lang="ts">
import { defineComponent, nextTick, reactive, ref } from "vue";
import dayjs, { Dayjs } from "_dayjs@1.11.6@dayjs";
import {
  DishListReqForm,
  DishListResForm,
  DishListResListenObject,
} from "@/entity/entityDefine";
import DishEdit from "@/components/DishEdit.vue";
import { dishList } from "@/api/DishManage";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "CategoryManage",
  components: {
    DishEdit,
  },
  mounted() {
    console.log("mounted");
    this.methods.requestData();
  },
  setup() {
    let dishEdit = ref();
    let editDishId = ref("");
    let isEditMode = ref(false);
    let dialogFormVisible = ref(false);
    let searchText = ref("");
    var currentPage = ref(1);
    let totalCount = ref(0);
    let pageSize = ref(10);
    let dialogTitle = ref("添加菜品");

    let params: DishListReqForm = {
      page: 1,
      pageSize: 10,
      name: "",
    };
    let respData: DishListResForm = reactive({
      records: [],
      total: 0,
      size: 0,
      current: 0,
      pages: 0,
      searchCount: 0,
    });

    let pageData: DishListResListenObject = reactive({
      res: respData,
    });

    const methods = {
      getChildData(state: boolean) {
        if (state) {
          dialogFormVisible.value = false;
          methods.requestData();
        }
      },
      getImageUrl(url: string) {
        return "/api/common/download?fileName=" + url;
      },
      handleAddDish() {
        //
        dialogTitle.value = "添加菜品";
        isEditMode.value = false;
        dialogFormVisible.value = true;
        nextTick(()=>{
          dishEdit.value.methods.setEditMode(false);
        })
        
      },
      handleUpdateState(id: string, status: number) {
        //
        // methods.updateEmployeeState(id,status);
        ElMessage.info("功能预留,未实现");
      },
      handleEdit(inex: any, dishId: any) {
        //
        dialogTitle.value = "修改菜品";
        isEditMode.value = true;
        dialogFormVisible.value = true;
        editDishId.value = dishId;
        nextTick(()=>{
          dishEdit.value.methods.setEditMode(true);
          dishEdit.value.methods.setDishId(dishId);
        });
        
      },
      handleDelete(inex: any, row: any) {
        //
        ElMessage.info("功能预留,未实现");
      },

      handlePageIndexChange(pageIndex: number) {
        currentPage.value = pageIndex;
        methods.requestData();
      },

      convertDate(date: string) {
        let format = dayjs(date).format("YYYY年MM月DD日 HH:mm:ss");
        return format;
      },

      async requestData() {
        params.name = searchText.value;
        if (searchText.value === "") {
          params.name = undefined;
        }
        params.page = currentPage.value;
        params.pageSize = pageSize.value;
        const { code, msg, data } = await dishList(params);

        if (code == 200) {
          //
          let res = data!;
          pageData.res = res;
          totalCount.value = res.total;
          console.log(respData);
          console.log(totalCount);
        } else {
          // 网络层已提示信息
          // console.log(msg);
        }
      },

      // async updateEmployeeState(id:string, status:number) {
      //   let param:CategoryListReqForm = {
      //     status:status,
      //     id:id
      //   }
      //   const { code, msg, data } = await categoryList(param);

      //   if (code == 200) {
      //     //
      //     ElMessage.success("状态修改成功");
      //     methods.requestData();
      //   } else {
      //     // 网络层已提示信息
      //     // console.log(msg);
      //   }
      // }
    };

    return {
      searchText,
      methods,
      pageData,
      currentPage,
      pageSize,
      totalCount,
      dialogFormVisible,
      dialogTitle,
      editDishId,
      dishEdit,
      isEditMode
    };
  },
});
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.pagination-block {
  padding-top: 16px;
}

el-col {
  display: flex !important;
}
</style>
